<template>
    <!-- card组件布局 -->
    <el-card class="box-card">
        <!-- 头部 -->
        <div slot="header" class="clearfix">
            <el-tabs v-model="activName">
                <!-- tab标签组件 -->
                <el-tab-pane label="销售额" name="sele"></el-tab-pane>
                <el-tab-pane label="访问量" name="vaches"></el-tab-pane>
            </el-tabs>

            <!-- 头部右侧 -->
            <div class="reight">
                <span @click="styDay">今日</span>
                <span @click="setWeek">本周</span>
                <span @click="setMonth">本月</span>
                <span @click="setYear">本年</span>
                <!-- v-model="value1" -->
                <el-date-picker class="date" v-model="data" format="yyyy-MM-dd " value-format="yyyy-M-d"
                    type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"
                    size="mini">
                </el-date-picker>
            </div>
        </div>
        <el-row :gutter="10">
            <el-col :span="18">
                <!-- 容器 -->
                <div ref="charts" class="echres"></div>
            </el-col>
            <el-col :span="6">
                <h3>门店{{ title }}排名</h3>
                <ul class="mylist">
                    <li>
                        <span class="indexer">1</span>
                        <span>麦当劳</span>
                        <span>324,112</span>
                    </li>
                    <li>
                        <span class="indexer">2</span>
                        <span>肯德基</span>
                        <span>323,112</span>
                    </li>
                    <li>
                        <span class="indexer">3</span>
                        <span>肯德基</span>
                        <span>323,112</span>
                    </li>
                    <li>
                        <span>4</span>
                        <span>肯德基</span>
                        <span>323,112</span>
                    </li>
                    <li>
                        <span>5</span>
                        <span>肯德基</span>
                        <span>323,112</span>
                    </li>
                    <li>
                        <span>6</span>
                        <span>肯德基</span>
                        <span>323,112</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
import charts from 'echarts'
import dayjs from 'dayjs'
import { mapState } from 'vuex'

export default {
    name: 'Sale',
    data() {
        return {
            activName: 'sele',
            mycharts: null,
            // 收集时间
            data: []
        }
    },
    mounted() {
        // 初始化 echarts 数据
        this.mycharts = charts.init(this.$refs.charts);
        // 配置数据
        this.mycharts.setOption({
            title: {
                text: this.title + '趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.listState.orderFullYearAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: this.listState.orderFullYear,
                    color: "#5271CB",
                }
            ]
        })
    },
    computed: {
        title() {
            return this.activName == 'sele' ? '销售额' : '访问量';
        },

        ...mapState({
            listState: state => state.home.list
        })
    },
    watch: {
        title() {
            //重新修改图标的配置数据
            //图标配置数据可以再次修改，如果有新的数值，新的数值，没有新的数值，还是用以前的
            this.mycharts.setOption({
                title: { text: this.title },
                xAxis: {
                    data: this.title == "销售额" ? this.listState.orderFullYearAxis : this.listState.userFullYearAxis
                },
                series: {
                    data: this.title == "销售额" ? this.listState.orderFullYear : this.listState.userFullYear,
                    color: this.title == "销售额" ? '#5A7CDF' : '#9ACD32'
                },
            })
        },
        listState() {
            this.mycharts.setOption({
                title: { text: this.title },
                xAxis: {
                    data: this.title == "销售额" ? this.listState.orderFullYearAxis : this.listState.userFullYearAxis
                },
                series: {
                    data: this.title == "销售额" ? this.listState.orderFullYear : this.listState.userFullYear,
                    color: this.title == "销售额" ? '#5A7CDF' : '#9ACD32'
                },
            })
        }
    },
    methods: {
        // 获取今天时间
        styDay() {
            const day = dayjs().day(1).format('YYYY-MM-DD');
            this.data = [day, day]
        },

        // 获取本周时间
        setWeek() {
            const start = dayjs().day(1).format('YYYY-MM-DD');
            const end = dayjs().day(7).format('YYYY-MM-DD');
            this.data = [start, end]
        },

        // 获取本月时间
        setMonth() {
            const start = dayjs().startOf('month').format('YYYY-MM-DD');
            const end = dayjs().endOf('month').format('YYYY-MM-DD');
            this.data = [start, end]
        },

        // 获取本年时间
        setYear() {
            const start = dayjs().startOf('year').format('YYYY-MM-DD');
            const end = dayjs().endOf('year').format('YYYY-MM-DD');
            this.data = [start, end]
        }
    }
}
</script>

<style lang="less" scoped>
.mylist {
    padding: 0;
    list-style: none;
    width: 100%;
    height: 300px;

    >li {
        width: 100%;
        height: 8%;
        margin-bottom: 10px;

        >.indexer {

            border-radius: 50%;
            background: #000;
            color: #fff;
            margin-left: 0;
        }

        >span:first-child {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        >span:nth-child(2) {
            display: inline-block;
            margin-left: 30px;
        }

        >span:last-child {
            float: right;
            line-height: 20px;
        }
    }
}
</style>

<style>
/* 
    1.位置属性(position, top, right, z-index, display, float等)
　　2.大小(width, height, padding, margin)
　　3.文字系列(font, line-height, letter-spacing, color- text-align等)
　　4.背景(background, border等)
　　5.其他(animation, transition等) 
*/
.clearfix {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.reight {
    position: absolute;
    padding: 5px;
    height: 100%;
    /* 绝地定位 */
    position: absolute;
    top: 0;
    right: 0;
}

.reight span {
    margin: 0px 10px;
}

.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
    width: 300px;
}

.echres {
    width: 100%;
    height: 300px;
}
</style>

